<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'italic 20px Times New Roman';

        // Define geometry constants
        const cx = 270;
        const radiusA = 80;
        const surfaceY = cx + radiusA + 20; // 370
        const cy = surfaceY - radiusA; // 290
        const hoopThickness = 7;
        
        // --- Draw Horizontal Surface ---
        ctx.beginPath();
        ctx.moveTo(50, surfaceY);
        ctx.lineTo(550, surfaceY);
        ctx.stroke();

        // Draw hatching for the surface
        ctx.lineWidth = 1;
        ctx.beginPath();
        for (let i = 55; i < 550; i += 15) {
            ctx.moveTo(i, surfaceY);
            ctx.lineTo(i - 10, surfaceY + 10);
        }
        ctx.stroke();
        ctx.lineWidth = 2;

        // --- Draw Coordinate Axes ---
        const axisOriginX = 120;
        const axisOriginY = 280;
        const axisLength = 80;
        
        // Y-axis
        ctx.beginPath();
        ctx.moveTo(axisOriginX, axisOriginY + 40);
        ctx.lineTo(axisOriginX, axisOriginY - axisLength);
        // Arrow head for Y
        ctx.moveTo(axisOriginX, axisOriginY - axisLength);
        ctx.lineTo(axisOriginX - 5, axisOriginY - axisLength + 10);
        ctx.moveTo(axisOriginX, axisOriginY - axisLength);
        ctx.lineTo(axisOriginX + 5, axisOriginY - axisLength + 10);
        ctx.stroke();
        ctx.fillText('y', axisOriginX - 25, axisOriginY - axisLength + 10);

        // X-axis
        ctx.beginPath();
        ctx.moveTo(axisOriginX - 40, axisOriginY);
        ctx.lineTo(axisOriginX + axisLength, axisOriginY);
        // Arrow head for X
        ctx.moveTo(axisOriginX + axisLength, axisOriginY);
        ctx.lineTo(axisOriginX + axisLength - 10, axisOriginY - 5);
        ctx.moveTo(axisOriginX + axisLength, axisOriginY);
        ctx.lineTo(axisOriginX + axisLength - 10, axisOriginY + 5);
        ctx.stroke();
        ctx.fillText('x', axisOriginX + axisLength + 5, axisOriginY + 8);

        // --- Draw Block M ---
        const blockWidth = 120;
        const blockHeight = 90;
        const blockX = cx + radiusA + 20;
        const blockY = surfaceY - blockHeight;
        ctx.beginPath();
        ctx.rect(blockX, blockY, blockWidth, blockHeight);
        ctx.stroke();
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('M', blockX + blockWidth / 2 - 12, blockY + blockHeight / 2 + 10);
        ctx.font = 'italic 20px Times New Roman';

        // --- Draw Circular Track ---
        // Draw as a thick line
        ctx.beginPath();
        ctx.arc(cx, cy, radiusA, 0, 2 * Math.PI);
        ctx.lineWidth = hoopThickness;
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width

        // --- Draw Connecting Rod ---
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(blockX, cy);
        ctx.stroke();

        // --- Draw Angle and Radius indicators ---
        // Center cross
        ctx.beginPath();
        ctx.moveTo(cx - 5, cy);
        ctx.lineTo(cx + 5, cy);
        ctx.moveTo(cx, cy - 5);
        ctx.lineTo(cx, cy + 5);
        ctx.stroke();
        
        // Radius 'a' line (horizontal)
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx - radiusA, cy);
        ctx.stroke();
        ctx.fillText('a', cx - radiusA / 2 - 5, cy - 10);

        // Vertical reference line
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, cy + radiusA);
        ctx.stroke();

        // Dashed line for angle theta
        const theta_rad = 35 * Math.PI / 180; // approx 35 degrees
        const particleX = cx + radiusA * Math.sin(theta_rad);
        const particleY = cy + radiusA * Math.cos(theta_rad);
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(cx, cy);
        ctx.lineTo(particleX, particleY);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // Angle arc for theta
        const arcRadius = 30;
        ctx.beginPath();
        // Canvas angles start from 3 o'clock. We need to start from 6 o'clock (PI/2)
        ctx.arc(cx, cy, arcRadius, Math.PI / 2, Math.PI / 2 + theta_rad);
        ctx.stroke();
        
        // Angle label 'θ'
        const labelAngle = Math.PI / 2 + theta_rad / 2;
        const labelR = arcRadius + 2;
        const textX = cx + labelR * Math.cos(labelAngle) + 5;
        const textY = cy + labelR * Math.sin(labelAngle) + 5;
        ctx.fillText('θ', textX, textY);
        
        // --- Add Mass Label 'm' ---
        ctx.fillText('m', cx + radiusA + 5, surfaceY - 15);
        
        // --- Add Figure Caption ---
        ctx.font = '16px Times New Roman';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.7.', canvas.width / 2, canvas.height - 15);

    </script>
</body>
</html>